
<template>
  <div class="box productType">
    <div>属性列表</div>
    <!-- //表格头 -->
    <div class="box1">
      <div>
        <li><i class="el-icon-notebook-2"></i> 数据列表</li>
        <el-button plain @click="open">添加</el-button>
      </div>
    </div>

    <!-- //表格 -->
    <div class="box2">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="date" width="50" align="center" type="selection" >
        </el-table-column>

        <el-table-column prop="id" label="编号" width="180" align="center">
        </el-table-column>

        <el-table-column prop="name" label="属性名称" align="center">
        </el-table-column>

        <el-table-column  label="商品类型" align="center"><div>{{uname}}</div>
        </el-table-column>

        <el-table-column prop="address" label="属性是否可选" align="center"  v-model="selecType">  
        </el-table-column>

        <el-table-column
          prop="address2"
          label="属性值的录入方式"
          align="center"
          v-model="inputType"
        >
        </el-table-column>

        <el-table-column prop="inputList" label="可选值列表" align="center">
        </el-table-column>

        <el-table-column prop="sort" label="排序" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center" id="change" width="300">
          <template slot-scope="scope">
            <el-button plain @click="handleEdit3(scope.row)">编辑</el-button>

           <el-button type="danger" @click="opens( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <div class="box3">

        <div>
                  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    
            <el-form-item label="">
              <el-select v-model="formInline.region" placeholder="批量操作">
                <el-option label="删除" value="shanghai"></el-option>
            
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>

   
        <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                    :page-sizes="[5, 10, 15]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total= page
              >
              </el-pagination>
            </div>
        </div>

    
          
       
       
    
  </div>
</template>



<script>
//添加按钮
export default {
  name: "Shuxing",
  mounted() {
   
    let that = this;
    that.uname =  this.$route.params.names
     that.type = this.$route.params.type;
     that.productAttributeCategoryId= this.$route.params.productAttributeCategoryId;
     that.num = this.$route.params.num

   
    this.$axios
      .get("productAttribute/list/"+this.$route.params.num, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type:0,
        },
      })
      .then(function (response) {
       console.log(response);
        that.tableData = response.data.data.list;
         that.page = response.data.data.total,
         console.log(response.data.data.list);
          that.selectType=response.data.data.list.selectType
         that.inputType=response.data.data.list.inputType
         console.log(that.selectType)
         console.log(response.data.data.list.selectType);
        
          
 
      })
      .catch(function (error) {});
  },

  data() {
    return {
      selecType:"",
      inputType:"",
        num:'',
       merchantSelectedIds:[],

      tableData: [
         
      
      ],  formInline: {
          user: '',
          region: ''
        },
      currentPage4: 0,
      currentPage: 0,
      name: "",
      pageNum: 1,
      pageSize: 5,
      index: "",
      namese:"qwe123",
      uname:"",
         page:1,
         type:5,
         productAttributeCategoryId:""
    };
  },

  methods: {




      
    fn() {
      let that = this;
      this.$axios
        .get("productAttribute/list/"+this.$route.params.num , {
          params: {
         pageNum: this.pageNum,
            pageSize: this.pageSize,
               type:0,

          },
        })
        .then(function (response) {
          that.tableData = response.data.data.list;
           that.page = response.data.data.total
             
        })
        .catch(function (error) {});
    },
//添加
    open() {
     
       this.$router.push({
          name:"Tianjia",
          params:{
    
         shangpin:this.uname,
          type:this.type,
          productAttributeCategoryId:this.productAttributeCategoryId
      

       }
      });
    },


//分页
    handleSizeChange(val) {
     this.pageSize = `${val}`,
     this.fn();
    },
    handleCurrentChange(val) {
       this.pageNum = `${val}`;
      this.fn();
    },

//批量删除
//获取id
handleSelectionChange(value){



value.forEach(element => {
 
     this.merchantSelectedIds.push(element.id)



 })


},


//再删除
onSubmit(){
  this.merchantSelectedIds=new Set(this.merchantSelectedIds)
  console.log(this.merchantSelectedIds);
  this.merchantSelectedIds.forEach(element => {
 
   console.log(element);
   this.$axios.post('/productAttribute/delete?ids='+element)



 });
 this.fn()
  
  
    },
  







//删除
      opens(index, row) {
            let that = this

              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.$axios.post('/productAttribute/delete?ids='+index.id,{
                          
                }),
                console.log(index.id);
                that.fn()
                this.$message({       
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
            },

    // 编辑
    handleEdit3(index, row) {
      // console.log(index, row);
      // console.log(index.id);
      // console.log(index.name);
      // console.log(index.inputList);


      this.num = index.id;

      this.$router.push({
        name:"Bianji",
       params:{
         sort: index.sort,
         inputList:index.inputList,
         shuxing:index.name,
         shangpin:this.uname,
         id:index.id,
         
        
         

       }
      });
    },
  },
};
</script>




<style scoped>
li {
  list-style: none;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 3.125rem;
}
.box1 {
  font-size: 1.5625rem;
  line-height: 3.125rem;
  width: 97%;
  height: 6.125rem;
  border: 1px solid #ebeef5;
  border-radius: 2px;

  margin-bottom: 50px;
  margin-top: 20px;
}
.box1 div {
  widows: 90%;
  padding: 1.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.box2 {
  width: 97%;
}
#change {
  display: flex;
  flex-wrap: nowrap;
}

.box3 {
  margin-top: 1.875rem;
  width: 97%;
  display: flex;
  justify-content: space-between;
}


.el-dropdown {
    vertical-align:bottom;
  }
  .el-dropdown + .el-dropdown {
    margin-left: .9375rem;
  }
  .el-icon-arrow-down {
    font-size: .75rem;
  }


a {
  list-style: none;
  text-decoration: none;
  color: black;
}
</style>